<!--
 * @Author: szx
 * @Date: 2022-07-12 17:40:52
 * @LastEditTime: 2022-07-12 17:51:52
 * @Description: 
 * @FilePath: \learn\HTML\文字\白桃粉可爱风的立体字时钟\index.html
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白桃粉可爱风的立体字时钟</title>
    <link rel="stylesheet" href="./index.css">
    <script type="text/javascript">
        function myTime() {
            let time = new Date();
            let hh = time.getHours();
            let mm = time.getMinutes();
            let ss = time.getSeconds();
            document.getElementById('1').innerText = Math.floor(hh / 10)
            document.getElementById('2').innerText = hh % 10;
            document.getElementById('4').innerText = Math.floor(mm / 10)
            document.getElementById('5').innerText = mm % 10;
            document.getElementById('7').innerText = Math.floor(ss / 10)
            document.getElementById('8').innerText = ss % 10;

        }
        setInterval(myTime, 1000)
    </script>
</head>

<body>
    <div class="clock">
        <p id="1">0</p>
        <p id="2">0</p>
        <p id="3">:</p>
        <p id="4">0</p>
        <p id="5">0</p>
        <p id="6">:</p>
        <p id="7">0</p>
        <p id="8">0</p>
    </div>
</body>

</html>